<template>
  <div class="root">
    <m-header title="人脸资料">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="main-box" id="main-box">

      <div class="user-info" v-show="user">
        <div class="user-info-left">
          <img class="avatar" :src="user.avatarUrl ? user.avatarUrl : defaultAvatar" @click="link2InfoPage">
        </div>

        <div class="user-info-middle">
          <div class="name-gender">
            <span class="nickname">{{user.nickname}}</span>
            <mu-badge :color="user.gender == 1 ? '#3cb2e2' : '#f878a8'" :content="genderStr" />
          </div>

          <div class="tag-list">
            <mu-badge class="tag-item-margin" v-for="(tag,index) in user.tagList" :primary="index%2===0" :secondary="index%2===1" :content="tag.content"
              :key="index" />
          </div>

          <div class="user-score">
            <star-rating :show-rating="false" :increment="0.01" :rating="user.score" :star-size="20" read-only></star-rating>
          </div>
        </div>

        <div class="user-info-right">
          <div class="button" @click="makeEvaluation">
            <img src="../assets/images/write_eval_icon.png" class="eval-icon" alt=""> 去评价
          </div>
        </div>
      </div>

      <div class="evaluation-box" id="evaluation-con">
        <div v-for='item in evaluateList' class="evaluation-item" v-bind:style="{ top: getRandomLocation() , left: getRandomLocation() }">
          {{item.content}}
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import defaultAvatar from '../assets/images/default_avatar.png'
  import mHeader from '../components/header'
  import util from '../util/util.js'

  export default {
    components: {
      mHeader,
    },
    data() {
      return {
        defaultAvatar,
        accountId: null,
        user: {},
        evaluationPageNo: 1,
        evaluateList: {},
        // idOfSetinterval: -1
      }
    },
    computed: {
      genderStr: function () {
        if (this.user.gender === 1) {
          return '男';
        } else if (this.user.gender === 0) {
          return '女';
        } else {
          return '未知';
        }
      }
    },
    methods: {

      getUserInfo() {
        let _this = this;
        this.$http.get('user/' + _this.accountId).then(
          function (response) {
            if (response.data.code === '0') {
              _this.user = response.data.data.user;
              _this.getEvaluationList();
              // _this.loopGetEvaluation();
            }
          }
        );
      },

      loopGetEvaluation() {
        this.idOfSetinterval = window.setInterval(this.getEvaluationList, 5000)
      },

      getEvaluationList: function () {
        console.log('getEvaluationList, pageNo = ' + this.evaluationPageNo);
        let _this = this;
        const formData = new FormData();
        formData.append('page', this.evaluationPageNo);

        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // 上传成功，获取到结果 results
              let response = JSON.parse(xhr.responseText);
              console.log(response);
              if (response.code === '0') {
                _this.evaluateList = response.data.evaluateList;
                if (_this.evaluateList >= 10) {
                  _this.evaluationPageNo++;
                } else {
                  _this.evaluationPageNo = 1;
                }
              }
            }
          }
        };
        // let url = 'http://120.24.89.166:520/ar-social/api/user/' + this.accountId + '/evaluates';
        let url = util.getHost() + '/ar-social/api/user/' + this.accountId + '/evaluates';
        xhr.open('GET', url, true);
        xhr.setRequestHeader('Authorization', this.$store.state.token);
        xhr.send(formData);
      },

      link2InfoPage() {
        this.$router.push({
          name: 'UserInformation',
          params: {
            accountId: this.accountId
          }
        });
      },

      makeEvaluation() {
        var _accountId = this.$route.params.accountId;
        this.$router.push({
          name: 'MakeEvaluation',
          params: {
            accountId: _accountId,
          }
        });
      },

      setBg(photoURL) {
        let bg = document.getElementById('main-box');
        bg.style.backgroundImage = "url(" + photoURL + ")";
      },

      getRandomLocation() {
        let num;
        while (true) {
          num = Math.random() * 100;
          if (num >= 10 && num <= 80) {
            break;
          }
        }
        return parseInt(num) + '%';
      },

      // addEvaluation() {
      //   let x = this.getRandomNum();
      //   let y = this.getRandomNum();

      //   let dd = document.createElement('div');
      //   // createDiv.title = "thisisanewdiv.";
      //   // createDiv.id = "newDivId";
      //   dd.className = 'evaluation-item';
      //   // dd.style.position = 'absolute';
      //   dd.style.position = 'absolute';
      //   dd.style.left = x + '%';
      //   dd.style.top = y + '%';
      //   dd.style.color = 'white';
      //   dd.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
      //   dd.style.padding = '4px 8px';
      //   dd.style.borderRadius = '4px';
      //   dd.innerHTML = '评论!';

      //   document.getElementById('evaluation-con').appendChild(dd);
      // }

    },
    mounted() {
      this.accountId = this.$route.params.accountId;
      let photoURL = this.$route.query.photoURL;
      this.setBg(photoURL);
      this.getUserInfo();
      // console.log('token ' + this.$store.state.token);
    }
  }

</script>

<style lang="less" scoped>
  .main-box {
    flex: 1;
    /*height: 100%;*/
    /* 加载背景图 */
    /*background-image: url(../assets/meinv.png);*/
    /*background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490538835&di=6a151de7508d0006c0bbbdf37844ce3f&imgtype=jpg&er=1&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8601a18b87d6277f01ef72382a381f30e924fc35.jpg);*/
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #464646;
    display: flex;
    flex-direction: column;
  }

  .user-info {
    padding: 16px 0;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    .avatar {
      border-radius: 50%;
      border: 1px solid #9c55a1;
      width: 64px;
      height: 64px;
    }
    &-left {
      margin: 0 24px;
    }
    &-middle {
      flex: 1;
      .name-gender {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333333;
        .nickname {
          margin-right: 8px;
        }
      }
      .tag-list {
        margin-top: 2px;
        /*height: 20%;*/
        max-height: 44px;
        overflow: hidden;
        .badge {
          margin: 0 2px;
        }
      }
      .user-score {
        margin-top: 2px;
      }
    }
    &-right {
      margin: 0 24px;
      .button {
        display: flex;
        align-items: center;
        padding: 3px 8px 3px 4px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: 12px;
        color: white;
        .eval-icon {
          width: 16px;
          margin: 0 2px;
        }
      }
    }
  }

  .evaluation-box {
    /*background-color: rgba(255, 222, 222, 0.5);*/
    flex: 1;
    position: relative;
    /*color: white;*/
    .evaluation-item {
      color: white;
      font-size: 16px;
      position: absolute;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

</style>
